<template>
  <div>
    <!-- :index-list="indexList" -->
    <van-nav-bar title="城市列表" left-arrow @click-left="$router.go(-1)" />
    <van-index-bar
      highlight-color="#21b97a"
      :sticky="false"
      :index-list="indexList"
    >
      <van-index-anchor index="#" class="col">当前城市</van-index-anchor>
      <van-cell title="北京" class="citystyle" />
      <van-index-anchor index="热" class="col">热门城市</van-index-anchor>
      <van-cell
        v-for="item in hotList"
        :key="item.label"
        :title="item.label"
        class="citystyle"
      />

      <van-index-anchor
        v-for="(item, index) in this.firstName"
        :key="index"
        :index="index"
      >
        <span class="indexWord">{{ index }}</span>
        <van-cell
          @click="chooseCity(citem)"
          v-for="(citem, cindex) in item"
          :key="cindex"
          :title="citem"
          class="citystyle pad"
        />
      </van-index-anchor>
    </van-index-bar>
  </div>
</template>

<script>
import { cityList, hotCity } from '@/api/area'
import pinyin from 'js-pinyin'
export default {
  name: 'CityList',
  props: {},
  components: {},
  data () {
    return {
      hotList: '',
      cityList: '',
      firstName: null,
      indexList: [
        '#',
        '热',
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'J',
        'K',
        'L',
        'M',
        'N',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'W',
        'X',
        'Y',
        'Z'
      ],
      FirstPin: [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'J',
        'K',
        'L',
        'M',
        'N',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'W',
        'X',
        'Y',
        'Z'
      ]
    }
  },
  async created () {
    // 城市列表
    const data = await cityList()
    this.cityList = data.body
    console.log(data.body)
    const cityNameList = []
    for (const p in this.cityList) {
      cityNameList.push(this.cityList[p].label)
    }
    console.log(cityNameList)
    pinyin.setOptions({ checkPolyphone: false, charCase: 0 })

    this.firstName = {}
    this.FirstPin.forEach(item => {
      this.firstName[item] = []
      cityNameList.forEach(el => {
        const first = pinyin.getFullChars(el).substring(0, 1)
        if (first === item) {
          this.firstName[item].push(el)
        }
      })
    })
    console.log(this.firstName)

    // 热门城市
    const hotData = await hotCity()
    console.log(hotData)
    this.hotList = hotData.body
  }
}
</script>

<style scoped lang="less">
.col {
  color: #999;
}
.indexWord {
  color: #999;
  font-size: 14px;
}
.citystyle {
  color: #333;
  font-size: 16px;
}
.pad {
  margin-left: -17px;
}
</style>
